<script setup>
  const props = defineProps({
    item: Object
  })
</script>

<template>
  <Submenu v-if="item.children?.length" :name='item.name'>
    <template #title>
      <span :class="[item.icon, 'iconfont','menu-icon']"></span>
      <span>{{ item.title }}</span>
    </template>
    <menu-sub v-for="i in item.children" :key="i.name" :item="i" />
  </Submenu>
  <MenuItem v-else :name='item.name'>
    <span :class="[item.icon, 'iconfont','menu-icon']"></span>
    <span>{{ item.title }}</span>
  </MenuItem>
</template>

<style scoped lang="scss">
@import url('@/assets/css/sider.scss');
</style>
